<template>
  <div>
    <div class="mat-title-pane">
      <nav-title :mat="mat" :source="mat.source" :name="mat.title" @click-title="$emit('click-title', $event)"></nav-title>
      <span class="mat-toolbar">
        <star :star="star"></star>
        <a target="_blank" :href="matLink">
          <ri :i="codeRepoIcon" title="工程原址"></ri>
        </a>
        <a v-if="isProject" :href="readme" title="打开README"><ri i="info"></ri></a>
        <ri v-if="isDir" :i="showHiddenIcon" @click="toggleShowHidden" title="切换隐藏文件"></ri>
      </span>
    </div>
    <div class="mat-content">
      <div v-if=" mat.format == $C.MatFormat.Dir || mat.format == $C.MatFormat.Project " >
        <files-list :mat="mat" :showHidden="isShowHidden" @select="select"></files-list>
      </div>
      <div v-else-if="mat.format == $C.MatFormat.File && getPathExt() != 'md'">
        <code-content :content="mat.content" :lang="codeLang" @select="select" ></code-content>
      </div>
      <mat-content v-else :content="mat.content" :mat="mat" @select="select"></mat-content>
    </div>
  </div>
</template>

<script>
import NavTitle from "./NavTitle.vue";
import { MatFormat } from "@js/constants.js";
import FilesList from "../content/FilesList.vue";
import CodeContent from "../content/CodeContent.vue";
import MatContent from "../content/MatContent.vue";
import Star from "@tools/Star.vue";
import paths from "@js/utils/paths.js";

export default {
  props: ["mat"],
  components: {
    NavTitle,
    FilesList,
    CodeContent,
    MatContent,
    Star,
  },
  data() {
    return {
      isShowHidden: false,
      star: {},
      versions: [],
      version: "master",
    };
  },
  created() {
    
  },
  computed: {
    isProject() {
      return this.mat.format == MatFormat.Project;
    },
    isDir() {
      return (
        this.mat.format == MatFormat.Dir || this.mat.format == MatFormat.Project
      );
    },
    matLink() {
      let link = this.mat.link;
      if (!link) {
        console.log(this.mat.source, this.mat.title);
        let p = this.$route.path.replace("/projects/", "");
        link = "https://" + p;
      }
      return link;
    },
    showHiddenIcon() {
      return this.isShowHidden ? "eye" : "eye-close";
    },
    codeRepoIcon() {
      if (this.mat.source == "github.com") {
        return "github";
      } else {
        return "elink";
      }
    },
    readme() {
      return "/#" + this.$route.path + "/blob/master/README.md";
    },
    codeLang() {
      if (this.mat.title) {
        let t = this.mat.title.split(".");
        return "lang-" + t[t.length - 1];
      } else {
        return "";
      }
    },
    dirPath() {
      let mat = this.mat;
      return paths.join(mat.source, mat.title);
    },
  },
  methods: {
    getPathExt() {
      return paths.getExt(this.$route.path);
    },
    toggleShowHidden() {
      this.isShowHidden = !this.isShowHidden;
    },
    select(e) {
      this.$emit("select", e);
    },
  },
};
</script>